// SPDX-License-Identifier: MIT

@use "../settings/config" as cfg;
@use "../settings/icons";
@use "../settings/utils";

$color-bg:           -color-bg-subtle !default;
$color-bg-hover:     if(cfg.$darkMode, -color-base-6, -color-base-2) !default;
$color-border-hover: -color-accent-muted !default;
$color-bg-selected:  $color-bg-hover !default;
$color-separator:    -color-border-muted !default;

$padding-x: 0.3em !default;
$padding-y: 4px !default;
$spacing:   4px !default;
$border-width: cfg.$border-width !default;
$breadcrumbs-padding-x:      1em   !default;
$breadcrumbs-link-padding-x: 0.5em !default;
$breadcrumbs-link-padding-y: 2px   !default;

.tool-bar {
  -fx-background-color: -color-border-muted, $color-bg;
  -fx-background-insets: 0, 0 0 $border-width 0;
  -fx-padding: $padding-y $padding-x $padding-y $padding-x;
  -fx-spacing: $spacing;
  -fx-alignment: CENTER_LEFT;

  >.container {

    >.button,
    >.menu-button,
    >.split-menu-button {
      -color-button-bg: $color-bg;
      -color-button-bg-hover: $color-bg-hover;
      -color-button-border-hover: $color-border-hover;
      -color-button-border-focused: $color-border-hover;
      -fx-background-insets: 0;
      -fx-effect: none;

      &:hover {
        -fx-background-insets: 0, cfg.$border-width;
      }

      &.button-icon {
        // all toolbar buttons should have the same size
        -fx-padding: cfg.$padding-y cfg.$padding-x cfg.$padding-y cfg.$padding-x;
      }
    }

    .toggle-button {
      -color-button-bg: $color-bg;
      -color-button-border-hover: $color-border-hover;
      -color-button-bg-selected: $color-bg-selected;
      -color-button-fg-selected: -color-fg-default;
      -fx-background-insets: 0;
      -fx-effect: none;

      &:hover {
        -fx-background-insets: 0, cfg.$border-width;
        -fx-background-color: -color-button-border-hover, $color-bg;
      }

      &:hover:selected {
        -fx-background-color: -color-button-border-hover, $color-bg-selected;
      }
    }

    .breadcrumbs {
      -fx-background-color: -color-border-default, -color-bg-default;
      -fx-background-insets: 0, cfg.$border-width;
      -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
      -fx-padding: (cfg.$padding-y - $breadcrumbs-link-padding-y) $breadcrumbs-padding-x
                   (cfg.$padding-y - $breadcrumbs-link-padding-y) $breadcrumbs-padding-x;

      >.hyperlink {
        -color-link-fg: -color-fg-default;
        -color-link-fg-visited: -color-fg-default;
        -color-link-fg-armed: -color-fg-default;
        -fx-padding: $breadcrumbs-link-padding-y $breadcrumbs-link-padding-x
                     $breadcrumbs-link-padding-y $breadcrumbs-link-padding-x;
        -fx-underline: false;
        -fx-cursor: default;

        &:hover {
          -fx-background-color: $color-bg-hover;
          -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
        }
      }
    }
  }

  // When toolbar doesn't have enough size to place all elements, it creates additional
  // menu button (the ToolBarOverflowMenu) and roughly hides all overflown elements
  // in there. It's end-up as a normal button (or combo-box etc) inside a menu item, which
  // is a very unlucky implementation that's pretty hard to style nicely.
  // Given the very rare use case and the fact that the implementation is a complete non-sense,
  // there are no reasons to support it. So, expect that hover, focused etc effects may not work
  // inside the overflow menu.
  >.tool-bar-overflow-button {
    -fx-padding: 0 $padding-x 0 $spacing;

    >.arrow {
      @include icons.get("arrow-double-right", false);
      -fx-background-color: -color-fg-default;
    }

    .menu-item:hover {
      -fx-background-color: transparent;
    }
  }

  &:vertical {
    -fx-background-insets: 0, 0 $border-width 0 0;
    -fx-padding: $padding-x $padding-y $padding-x $padding-y;
    -fx-alignment: TOP_LEFT;

    >.container {
      >.separator {
        -fx-orientation: horizontal;
      }
    }

    >.tool-bar-overflow-button {
      -fx-padding: $spacing 0 $padding-x 0;
    }

    // this rule existed in modena.css, but JavaFX doesn't apply it automatically,
    // you supposed to add it manually.
    &.right {
      -fx-background-insets: 0, 0 0 0 $border-width;
    }
  }

  // this rule existed in modena.css, but JavaFX doesn't apply it automatically,
  // you supposed to add it manually.
  &.bottom {
    -fx-background-insets: 0, $border-width 0 0 0;
  }
}
